import React, { Component } from "react";
import './TimeBack.css'
import imgRight from '../../assets/images/right.png'

class TimeBack1 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hour: 0,
            minute: 0,
            second: 0
        }
    }
    componentDidMount() {
        const end = Date.parse(new Date('2022-10-22 24:00'))
        this.countFun(end)
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    countFun = (end) => {
        let now_time = Date.parse(new Date())
        var remaining = end - now_time;
        this.timer = setInterval(() => {
            if(remaining > 1000) {
                remaining -= 1000;
                let hour = Math.floor((remaining/1000/3600)%24);
                let minute = Math.floor((remaining/1000/60)%60);
                let second = Math.floor((remaining/1000%60));

                this.setState ({
                    hour:hour < 10 ? "0" + hour : hour,
                    minute:minute < 10 ? "0" + minute : minute,
                    second:second < 10 ? "0" + second : second,
                })
            } else {
                clearInterval(this.timer)
            }
        }, 1000)
    }
    render() {
        return (
            <>
                <div className="timeBack-container">
                    <div className="sale">限时抢</div>
                    <span className="timeBack">距开始&nbsp;{this.state.hour}:{this.state.minute}:{this.state.second}</span>
                    <div className="timeBack-more">查看全部</div>
                    <img src={imgRight} />
                </div>
            </>
        )
    }
}

export default TimeBack1